<template>
	<view class="box">
		<!-- 页面头部 -->
		<div class="head">
			<!-- 返回按钮 -->
			<img src="../../static/img/fanhui.png" alt="" class="return_botton" @click="bc">
			<!-- 页面标题 -->
			<p class="title">优质公益活动</p>
		</div>
		<!-- 占位div -->
		<div class="mark"></div>
		<!-- 内容区 -->
		<div class="content" v-for="item in lists">
			<!-- 内容图片 -->
			<img :src="item.project_bg" alt="" class="content_img">
			<!-- 活动标题 -->
			<span class="content_title">{{item.project_title}}</span>
			<!-- 结束标记图片 -->
			<img src="../../static/img/3.png" alt="" class="over_img">
			<!-- 结束字样 -->
			<span class="over_word">结束</span>
			<p class="word_one">参与人数</p>
			<p class="number">{{item.project_join_people}}</p>
			<p class="word_tow">人</p>
			<img src="../../static/img/4.png" alt="" class="see">
			<p class="see_word">浏览</p>
			<p class="see_number">{{item.project_people_num}}</p>
		</div>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				lists: []
			}
		},
		methods: {
			bc () {
				uni.navigateBack({
					
				})
			}
		},
		async onShow () {
			let res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "good_project_more",
					
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			this.lists = res[1].data.result
		}
	}
</script>

<style scoped>
	
	/* 页面头部  */
	.head{
	  position: fixed;
	  top: 0px;
	  left: 0px;
	  width: 100%;
	  height: 76rpx;
	  line-height: 76rpx;
	  border-bottom: #EDEDED 1px solid;
	  background-color: white;
	  /* 高 76 行高 76  */
	}
	/* 返回按钮 */
	.return_botton{
	    margin-top: 20rpx;    /* 20 */
		margin-left: 20rpx;
	    float: left;
	    width: 36rpx;
	    height: 36rpx;
	    /* 宽高 36 */
	}
	/* 页面标题 */
	.title{
	    font-size: 31rpx;   /* 31 */
	    font-weight: bold;
	    text-align: center;
	}
	.mark{
	    height: 76rpx;  /* 76 */
	}
	/* 内容区 */
	.content{
	    margin: 0 auto;
	    margin-top: 22rpx; /* 22 */
	    width: 701rpx;/* 701 */
	    height: 181rpx; /* 181 */
	    background-color: white;
	    border-radius: 9rpx;   /* 9 */
	    box-shadow: 18rpx 18rpx 54rpx 18rpx #F5F5F5;/* 18 18 54 18 */
	}
	/* 内容图片 */
	.content_img{
	    float: left;
	    width: 254rpx;     /* 254 */
	    height: 159rpx;  /* 159 */
	    margin-left: 11rpx;
	    margin-top: 11rpx;
	    /* 11 */
	}
	/* 内容标题 */
	.content_title{
	    float: left;
	    margin-top: 11rpx;/* 11 */
	    margin-left: 18rpx;   /* 18 */
	    font-size: 25rpx;  /* 25 */
	    font-weight: bold;
		width: 260rpx;
	}
	/* 结束标记图片 */
	.over_img{
	    float: left;
	    margin-top: 72rpx;
	    /* 72 */
	    margin-left: -270rpx; /* -286 */
	    width: 40rpx;
	    height: 40rpx;   /* 40 */
	}
	/* 结束字样 */
	.over_word{
	    float: left;
	    margin-top: 72rpx;    /* 72 */
	    margin-left: -226rpx;/* -226 */
	    font-size: 25rpx;/* 25 */
	
	}
	/* 参与人数字样 */
	.word_one{
	    float: left;
	    margin-top: 136rpx;   /* 136 */
	    margin-left: -261rpx;    /* 281 */
	    font-size: 22rpx;    /* 22 */
	    color: rgba(168, 168, 168, 1);
	}
	/* 参与人数 */
	.number{
	    float: left;
	    margin-top: 135rpx;/* 134 */
	    margin-left: -161rpx;    /* 181 */
	    font-size: 25rpx;    /* 25 */
	    color: #FF6200;
	}
	/* 人 */
	.word_tow{
	    float: left;
	    margin-top: 135rpx;   /* 136 */
	    margin-left: -120rpx;   /* 145 */
	    font-size: 22rpx;   /* 22 */
	    color: rgba(168, 168, 168, 1);
	}
	/* 浏览图片 */
	.see{
	    float: left;
	    margin-top: 138rpx; /* 138 */
	    width: 34rpx;    /* 34 */
	    height: 25rpx;/* 25 */
	}
	/* 浏览文字 */
	.see_word{
	    float: left;
	    margin-top: 134rpx;  /* 134 */
	    margin-left: 9rpx; /* 9 */
	    font-size: 22rpx;/* 22 */
	    color: rgba(168, 168, 168, 1); 
	}
	/* 浏览数量 */
	.see_number{
	    float: left;
	    margin-top: 134rpx; /* 134 */
	    margin-left: 14rpx;   /* 14 */
	    font-size: 22rpx; /* 22 */
	}
</style>
